<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>

  <script>
    let constRoute = [
      {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        name: 'login',
        meta: {
          title: '登陆',
          hidden: true,
          icon: 'Promotion',
        },
      },
      {
        path: '/',
        component: () => import('@/layout/index.vue'),
        name: 'layout',
        meta: {
          title: '',
          icon: '',
        },
        redirect: '/home',
        children: [
          {
            path: '/home',
            component: () => import('@/views/home/index.vue'),
            meta: {
              title: '首页',
              icon: 'HomeFilled',
            },
          },
        ],
      },
      {
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404',
        meta: {
          title: '404',
          hidden: true,
          icon: 'DocumentDelete',
        },
      },
      {
        path: '/screen',
        component: () => import('@/views/screen/index.vue'),
        name: 'Screen',
        meta: {
          title: '数据大屏',
          icon: 'Platform',
        },
      },
    ]

    let asnycRoute = [
      {
        path: '/acl',
        component: () => import('@/layout/index.vue'),
        name: 'Acl',
        meta: {
          title: '权限管理',
          icon: 'Lock',
        },
        redirect: '/acl/user',
        children: [
          {
            path: '/acl/user',
            component: () => import('@/views/acl/user/index.vue'),
            name: 'User',
            meta: {
              title: '用户管理',
              icon: 'User',
            },
          },
          {
            path: '/acl/role',
            component: () => import('@/views/acl/role/index.vue'),
            name: 'Role',
            meta: {
              title: '角色管理',
              icon: 'UserFilled',
            },
          },
          {
            path: '/acl/permission',
            component: () => import('@/views/acl/permission/index.vue'),
            name: 'Permission',
            meta: {
              title: '菜单管理',
              icon: 'Monitor',
            },
          },
        ],
      },
      {
        path: '/product',
        component: () => import('@/layout/index.vue'),
        name: 'Product',
        meta: {
          title: '商品管理',
          icon: 'Goods',
        },
        redirect: '/product/trademark',
        children: [
          {
            path: '/product/trademark',
            component: () => import('@/views/product/trademark/index.vue'),
            name: 'Trademark',
            meta: {
              title: '品牌管理',
              icon: 'ShoppingCartFull',
            },
          },
          {
            path: '/product/attr',
            component: () => import('@/views/product/attr/index.vue'),
            name: 'Attr',
            meta: {
              title: '属性管理',
              icon: 'ChromeFilled',
            },
          },
          {
            path: '/product/spu',
            component: () => import('@/views/product/spu/index.vue'),
            name: 'Spu',
            meta: {
              title: 'SPU管理',
              icon: 'Calendar',
            },
          },
          {
            path: '/product/sku',
            component: () => import('@/views/product/sku/index.vue'),
            name: 'Sku',
            meta: {
              title: 'SKU管理',
              icon: 'Orange',
            },
          },
        ],
      },
    ]

    let anyRoute = {
      path: '/:pathMatch(.*)*',
      redirect: '/404',
      name: 'Any',
      meta: {
        title: '任意路由',
        hidden: true,
        icon: 'DataLine',
      },
    }

    let guigu333 = ['Product', 'Trademark', 'Sku']
    function filterAsyncRoute(asnycRoute, routes) {
      return asnycRoute.filter((item) => {
        if (routes.includes(item.name)) {
          if (item.children && item.children.length > 0) {
            item.children = filterAsyncRoute(item.children, routes)
          }
          return true
        }
      })
    }

    let guigu333Result = filterAsyncRoute(asnycRoute, guigu333)
    console.log([...constRoute, ...guigu333Result, anyRoute], '硅谷333')

    console.log(asnycRoute)
  </script>
</html>
